<template>
  <div class="fillcontain">
<!--    <div>-->
<!--      <el-breadcrumb separator="/">-->
<!--        &lt;!&ndash;引入报红,不影响功能&ndash;&gt;-->
<!--        <el-breadcrumb-item :to="{ path: '/managerHomeT' }">首页</el-breadcrumb-item>-->
<!--        <el-breadcrumb-item :to="{ path: '/managerHomeT/adminList' }">管理员列表</el-breadcrumb-item>-->
<!--        -->
<!--        <el-bradcrumb-item>人员列表</el-bradcrumb-item>-->
<!--      </el-breadcrumb>-->
<!--    </div>-->
    <div class="table_container">
      <el-button type="primary" @click="handleAdd" size="small" style="margin-bottom: 10px">添加</el-button>
      <el-table
        :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize).filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
        border
        highlight-current-row
        style="width: 100%">
        <el-table-column
          label="编号"
          prop="id">
        </el-table-column>
        <el-table-column
          label="姓名"
          prop="name">
        </el-table-column>
        <el-table-column
          label="性别"
          prop="sex">
        </el-table-column>
        <el-table-column
          label="电话"
          prop="phone">
        </el-table-column>
        <el-table-column
          label="院系"
          prop="major">
        </el-table-column>
        <el-table-column
          align="right">
          <template slot="header" slot-scope="scope">
            <el-input
              v-model="search"
              size="mini"
              placeholder="输入关键字搜索"/>
          </template>
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">编辑
            </el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row.id)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="Pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[2,3,4,5]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.length"> //这是显示总共有多少数据，
        </el-pagination>
      </div>
    </div>
    <!-- 添加或修改对话框 -->
    <el-dialog :title="title" :visible.sync="dialogFormVisible">
      <el-form :model="formData" :rules="rules" ref="formData" class="demo-formData">
        <el-form-item label="编号" :label-width="formLabelWidth" prop="id">
          <el-input v-model.number="formData.id" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="姓名" :label-width="formLabelWidth" prop="name">
          <el-input v-model="formData.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth" prop="password">
          <el-input v-model="formData.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="性别" :label-width="formLabelWidth">
          <el-radio v-model="formData.sex" label="男">男</el-radio>
          <el-radio v-model="formData.sex" label="女">女</el-radio>
        </el-form-item>
        <el-form-item label="电话" :label-width="formLabelWidth" prop="phone">
          <el-input v-model="formData.phone" autocomplete="off" maxLength="11"></el-input>
        </el-form-item>
        <el-form-item label="院系" :label-width="formLabelWidth">
          <el-select v-model="formData.major" placeholder="请选择所属院系">
            <el-option label="软件工程系" value="软件工程系"></el-option>
            <el-option label="网络技术系" value="网络技术系"></el-option>
            <el-option label="电子系" value="电子系"></el-option>
            <el-option label="数码媒体系" value="数码媒体系"></el-option>
            <el-option label="计算机系" value="计算机系"></el-option>
            <el-option label="游戏系" value="游戏系"></el-option>
            <el-option label="财经系" value="财经系"></el-option>
            <el-option label="管理系" value="管理系"></el-option>
            <el-option label="外语系" value="外语系"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel()">取 消</el-button>
        <el-button type="primary" @click="submitForm('formData')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {getAdminList, updateAdmin, getAdmin, addAdmin, deleteAdmin} from "@/api/admin";

export default {
  data() {
    return {
      currentPage: 1, //初始页
      pageSize: 3,    //    每页的数据
      tableData: [],
      search: '',
      //添加/修改对话框
      title: '',
      dialogFormVisible: false,
      condition: '',
      // 表单参数
      formData: {
        // id: '',
        // name: '',
        // password: '',
        // sex: '',
        // phone: '',
        // major: ''
      },
      formLabelWidth: '120px',
      rules: {
        id: [
          {required: true, message: '请输入编号', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'}
        ],
        name: [
          {required: true, message: '请输入姓名', trigger: 'blur'}
        ],
        sex: [
          {required: true, message: '请输入性别', trigger: 'blur'},
        ],
        phone: [
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur"
          }
        ]
      }
    }
  },
  components: {},
  created() {
    this.initData();
  },
  methods: {
    initData() {
      this.getAdmins();
    },
    // 取消按钮
    cancel() {
      this.dialogFormVisible = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.formData = {
        id: undefined,
        name: undefined,
        password: undefined,
        sex: undefined,
        phone: undefined,
        major: undefined
      }
      this.resetForm("formData");
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.dialogFormVisible = true;
      this.condition = "add";

    },
    /** 修改按钮操作 */
    handleEdit(index, row) {
      this.reset();
      this.condition = "update";
      console.log("修改按钮取item id: " + row.id);
      getAdmin({id: row.id}).then(response => {
        console.log("res:" + JSON.stringify(response));
        this.formData = response;
        this.dialogFormVisible = true;
        this.title = "修改管理员";
      });
    },
    /** 提交按钮 */
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          if (this.condition == "update") {
            updateAdmin(this.formData).then(response => {
              this.$message({
                type: 'success',
                message: '修改成功'
              });
              this.dialogFormVisible = false;
              this.initData();
            });
          } else {
            addAdmin(this.formData).then(response => {
              this.$message({
                type: 'success',
                message: '新增成功'
              });
              this.dialogFormVisible = false;
              this.initData();
            });
          }
        }
      });
    },
    handleDelete(index, id) {
      console.log(index, id);
      this.$confirm('此操作将删除该' + id + '管理员, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteAdmin({id: id}).then((res) => {
          if (res.state == 0) {
            this.$message({
              type: 'success',
              message: '操作成功!'
            });
            location.reload();
          } else {
            this.$message({
              type: 'error',
              message: '添加失败'
            });
          }
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    // 初始页currentPage、初始每页数据数pageSize和数据data
    handleSizeChange: function (size) {
      this.pageSize = size;
      this.initData();
      console.log(this.pageSize)  //每页下拉显示数据
    },
    handleCurrentChange: function (currentPage) {
      this.currentPage = currentPage;
      console.log(this.currentPage)  //点击第几页
    },
    async getAdmins() {
      const admins = await getAdminList();
      this.tableData = [];
      console.log(admins);
      admins.forEach(item => {
        const tableData = {};
        tableData.name = item.name;
        tableData.sex = item.sex;
        tableData.id = item.id;
        tableData.phone = item.phone;
        tableData.major = item.major;
        this.tableData.push(tableData);
      })
    },
  },
}
</script>
<style>
.table_container {
  padding: 20px;
}

.Pagination {
  display: flex;
  justify-content: flex-start;
  margin-top: 8px;
}

</style>
